import React, { FC } from 'react'
import styled from "styled-components"
import title from '@/assert/images/title-b.png'
interface ITitle {
    name:string,
    top:string
}

const Title = styled.div`
      position: relative;
      ${(props:any)=>props.top};
      text-align: left;
      color:#fff;
      font-family: 'YouSheBiaoTiHei';
      font-style: italic;
      font-size: 1.8rem;
      font-weight:bold;
    /* .title:before{
      content: "";
      width: 1.8rem;
      height: 1.8rem;
      border: 3px solid #0AE9F6;
      margin-left: 3. 6rem;
      border-image: linear-gradient(0deg, #000000, #FFFFFF) 10px 10px;
      background: linear-gradient(90deg, #0AF2F6, #0AB1F6);
      box-shadow: 0px 4px 5px 0px rgba(67, 198, 255, 0.5);
    } */
    :after{
      content: "";
      color:#fff;
      font-weight: bold;
      display: inline-block;
      position: absolute;
      width: 24rem;
      height: 3.6rem;
      line-height:3.6rem;
      margin-left: 3.6rem;
      background: linear-gradient(90deg, #1AABFF 0%, rgba(26, 171, 255, 0) 100%);
      opacity: 0.35;
    }
    .title-span{
      color:#fff;
      font-weight: bold;
      display: inline-block;
      position: absolute;
      margin-left: 5rem;
      line-height:3.6rem;
      img{
        width: 1.8rem;
        height: 1.8rem;
        line-height:3.6rem;
        margin-right: 1rem;
        display: inline-block;
        vertical-align:middle;
      }
    }
`

const Content: FC<ITitle> = function (props) {

    return (
        <Title><div className='title-span'><img src={title} />{props.name}</div></Title>
    )
}

export default Content
